<template>
	<view>
		<view class="title">我的课程</view>
		<view class="row-box" style="justify-content: space-around;">
			<view v-for="(item,index) in list" class="task-item">
				<view style="position: relative;">
					<image :src="item.icon" class="icon"></image>
					<view class="num">{{ formatNumber(item.num) }}</view>
				</view>
				<view class="name">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-task",
		props: {
			// 检测类型 + 其他验证
			list: {
				type: Array,
				default: []

			},
			num: {
				type: Number,

			}
		},
		data() {
			return {
			};
		},
		methods: {
			formatNumber(num) {
				let data = "";
				if (num < 100) {
					data = num + "";
				} else if (num < 1000) {
					data = "99+";
				} else if (num < 9000) {
					const k = Math.floor(num / 1000);
					data = k + "K+";
				} else {
					data = "9K+";
				}
				return data;
			},
		},
	}
</script>

<style lang="scss" scoped>
	.row-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.title {
		font-size: 31rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: bolder;
		color: #393939;
		line-height: 42rpx;
		margin-bottom: 50rpx;
	}

	.task-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.icon {
		width: 70rpx;
		height: 65rpx;

	}

	.name {
		font-size: 27rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #4D4D4D;
		line-height: 37rpx
	}

	.num {
		width: 40rpx;
		height: 40rpx;
		background: #FF5757;
		font-size: 20rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 40rpx;
		text-align: center;
		border-radius: 50%;
		position: absolute;
		top: -30rpx;
		right: -40rpx;
	}
</style>